<template>
  <div class="mask">
    <div class="look">
      <p class="top">劳务人员详情</p>
      <div class="l1">基本信息</div>
      <div class="tab">
        <table :v-model="form1">
          <tr>
            <td class="cu">人员姓名</td>
            <td>{{ form1.name }}</td>
            <td class="cu">联系电话</td>
            <td>{{ form1.phone }}</td>
          </tr>
          <tr>
            <td class="cu">性别</td>
            <td>{{ form1.sex }}</td>
            <td class="cu">民族</td>
            <td>汉</td>
          </tr>
          <tr>
            <td class="cu">学历</td>
            <td>大专</td>
            <td class="cu">出生日期</td>
            <td>1978-3-14</td>
          </tr>
          <tr>
            <td class="cu">籍贯</td>
            <td>山东青岛</td>
            <td class="cu">住址</td>
            <td>崇明岛</td>
          </tr>
          <tr>
            <td class="cu">是否有重大疾病史</td>
            <td>否</td>
            <td class="cu">紧急联系人</td>
            <td>某某某</td>
          </tr>
          <tr>
            <td class="cu">紧急联系电话</td>
            <td>11111111</td>
            <td class="cu">所在项目</td>
            <td>{{ form1.item }}</td>
          </tr>
          <tr>
            <td class="cu">所属承建商</td>
            <td>{{ form1.contractor }}</td>
            <td class="cu">所属班组</td>
            <td>{{ form1.teams }}</td>
          </tr>
          <tr>
            <td class="cu">工人类型</td>
            <td>{{ form1.workerType }}</td>
            <td class="cu">当前工种</td>
            <td>{{ form1.gangwei }}</td>
          </tr>
          <tr>
            <td class="cu">进场日期</td>
            <td>2020-05-04</td>
            <td class="cu">退场日期</td>
            <td>2020-05-04</td>
          </tr>
        </table>
      </div>
      <div class="l1">身份信息</div>
      <div class="tab">
        <table>
          <tr>
            <td class="cu">证件类型</td>
            <td>身份证</td>
            <td class="cu">证件号</td>
            <td>{{ form1.idNumber }}</td>
          </tr>
          <tr>
            <td class="cu">发证单位</td>
            <td>山东青岛市南区派出所</td>
            <td class="cu">证件有效期</td>
            <td>xxxx-xx至xxxx-xx</td>
          </tr>
        </table>
      </div>
      <div class="l1">人脸信息</div>
      <div class="taba">
        <img
          src="https://img0.baidu.com/it/u=3755120132,3297190830&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"
          alt=""
        />
      </div>
      <button @click="xiaoshi1">关闭</button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { defineComponent, ref, defineEmits, reactive, watch } from "vue";
import service from "../../../utils/service";
const emit = defineEmits<{
  (e: "xx"): void;
}>();
function xiaoshi1() {
  emit("xx");
}
interface Iform {
  id: string;
  name: string;
  idNumber: string;
  sex: string;
  phone: string;
  workerType: string;
  worker: string;
  item: string;
  contractor: string;
  teams: string;
  state: string;
  professionalType: string;
  gangwei: string;
  iswork: string;
}
const form1 = reactive<Iform>({
  id: "",
  name: "",
  idNumber: "",
  sex: "",
  phone: "",
  workerType: "",
  worker: "",
  item: "",
  contractor: "",
  teams: "",
  state: "",
  professionalType: "",
  gangwei: "",
  iswork: "",
});
const props = defineProps<{
  name: string;
}>();
const defaultCheckedKeys = ref<string[]>();
// 获取管理员的信息：根据adminname进行获取
const getAdminDetail = () => {
  service({
    url: "flower",
    params: {
      name: props.name,
    },
  }).then((res) => {
    let newarr: any = [];
    form1.sex = res.data[0].sex;
    form1.name = res.data[0].name;
    form1.item = res.data[0].item;
    form1.contractor = res.data[0].contractor;
    form1.idNumber = res.data[0].idNumber;
    form1.workerType = res.data[0].workerType;
    form1.teams = res.data[0].teams;
    form1.phone = res.data[0].phone;
    form1.gangwei = res.data[0].gangwei;
    defaultCheckedKeys.value = newarr;
  });
};
watch(
  props,
  () => {
    getAdminDetail();
  },
  {
    deep: true,
  }
);
</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.l1 {
  width: 100px;
  height: 30px;
  border-left: 4px solid green;
  margin-left: 30px;
  font-size: 18px;
  margin: 10px 30px;
}
.top {
  font-size: 20px;
  font-weight: bold;
}
.look {
  position: fixed;
  top: 100px;
  left: 400px;
  width: 1000px;
  background-color: rgb(248, 245, 242);
  z-index: 100;
  height: 600px;
  overflow: auto;
}
.tab {
  width: 100%;
}
table {
  border-collapse: collapse;
  width: 800px;
  margin: auto;
  border: 2px solid rgb(173, 170, 170);
}
td {
  border: 1px solid rgb(173, 170, 170);
  width: 200px;
  height: 35px;
  text-align: center;
}
.taba {
  width: 100%;
}
img {
  width: 150px;
  height: 200px;
  display: block;
  margin: auto;
}
button {
  width: 100px;
  height: 30px;
  background-color: rgb(135, 135, 135);
  border-radius: 10px;
  border: none;
  float: right;
  margin-bottom: 10px;
}
.cu {
  font-size: 17px;
  font-weight: bold;
}
</style>